import { useTableColumns } from '@/components/ProTable';
import { ElButton, ElTag } from 'element-plus';
import { sexList, statusList } from '../constant';
import SvgIcon from '@/components/SvgIcon';
// import { MenuVO } from '@/api/system/menu';
import { MenuTypeEnum } from '@/enums/system/MenuTypeEnum';

export interface IDataItem {
  id: string;
  parentId?: string;
  name: string;
  type?: MenuTypeEnum;
  routeName: string;
  routePath: string;
  component?: string;
  sort?: number;
  hidden?: boolean;
  icon?: string;
  redirect?: string;
  perm?: string;
  children?: IDataItem[];
}

export const useTableColumnsConfig = ({ handleDelete, handleEdit, handleCreate }: any) => {
  const { columns } = useTableColumns<IDataItem>(() => {
    return [
      // { label: 'ID', prop: 'id', align: 'center', width: 80 },
      {
        label: '菜单名称',
        prop: 'name',
        render: (row) => {
          return (
            <>
              <SvgIcon iconClass={row.icon}></SvgIcon>
              <span class="ml-1">{row.name}</span>
            </>
          );
        },
      },
      {
        label: '类型',
        prop: 'type',
        width: 100,
        type: 'enum',
        mode: 'tag',
        options: [
          { value: 'CATALOG', label: '目录', color: 'warning' },
          { value: 'MENU', label: '菜单', color: 'primary' },
          { value: 'BUTTON', label: '按钮', color: 'success' },
        ],
      },
      { label: '路由名称', prop: 'routeName', width: 120 },
      { label: '路由路径', prop: 'routePath', width: 150 },
      { label: '权限标志', prop: 'perm', width: 150 },
      {
        label: '显示',
        prop: 'visible',
        type: 'enum',
        dot: true,
        width: 100,
        options: [
          { value: 1, label: '显示', color: 'success' },
          { value: 0, label: '隐藏', color: 'info' },
        ],
      },
      { label: '排序', prop: 'sort', width: 100 },
      {
        label: '操作',
        width: 160,
        fixed: 'right',
        render: (row) => {
          return (
            <>
              <ElButton type="primary" link icon="edit" onClick={() => handleCreate(row)}>
                编辑
              </ElButton>
              <ElButton type="danger" link icon="delete" onClick={() => handleDelete(row)}>
                删除
              </ElButton>
            </>
          );
        },
      },
    ];
  });

  return {
    columns,
  };
};
